<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./WEB-INF/templates/mainTemplate.xhtml">

            <ui:define name="top">
                Munchkin Quest - Play Guide
            </ui:define>

            <ui:define name="left">
                <p>
                    <h:link value="Home" outcome="index"/> 
                </p>
                <p>
                    <h:form>
                        <h:commandLink value="Restart" action="initialise"/>
                    </h:form>
                </p>
                <h:outputText value="Health" styleClass="boldblue" />
                <h:outputText value="#{stepBean.healthList}" escape="false"
                              styleClass="healthlist"/>

                <br/>
                <h:outputText value="Movement" styleClass="boldblue"/>
                <h:outputText value="#{stepBean.movementList}" escape="false"
                              styleClass="healthlist"/>

                <h:panelGroup rendered="#{stepBean.showCounters}">
                    <div id="combatbox">
                        <div>
                            <span class="boldblue">Combat Totals</span>
                        </div>
                        <h:form>
                            <h:panelGrid columns="2">
                                <h:panelGrid columns="1" styleClass="countertext">
                                    <h:outputText value="Player"/>
                                    <h:inputText id="playerTotal" styleClass="countertotal" 
                                                 value="#{combatCounter.playerTot}" converter="javax.faces.Short"/>
                                </h:panelGrid>
                                <h:panelGrid columns="1">
                                    <h:commandLink action="#{combatCounter.doIncPlayerTot()}">
                                        <h:graphicImage value="./resources/images/up.gif" styleClass="upclicked"/>
                                        <f:ajax execute="playerTotal" render="playerTotal"/>
                                    </h:commandLink>
                                    <h:commandLink action="#{combatCounter.doDecPlayerTot()}">
                                        <h:graphicImage value="./resources/images/down.gif" styleClass="downclicked"/>
                                        <f:ajax execute="playerTotal" render="playerTotal"/>
                                    </h:commandLink>
                                </h:panelGrid>
                            </h:panelGrid>
                            <h:panelGrid columns="2">
                                <h:panelGrid columns="1" styleClass="countertext">
                                    <h:outputText value="Monster"/>
                                    <h:inputText id="monsterTotal" styleClass="countertotal"
                                                 value="#{combatCounter.monsterTot}" converter="javax.faces.Short"/>
                                </h:panelGrid>
                                <h:panelGrid columns="1">
                                    <h:commandLink action="#{combatCounter.doIncMonsterTot()}">
                                        <h:graphicImage value="./resources/images/up.gif" styleClass="upclicked"/>
                                        <f:ajax execute="monsterTotal" render="monsterTotal"/>
                                    </h:commandLink>
                                    <h:commandLink action="#{combatCounter.doDecMonsterTot()}">
                                        <h:graphicImage value="./resources/images/down.gif" styleClass="upclicked"/>
                                        <f:ajax execute="monsterTotal" render="monsterTotal"/>
                                    </h:commandLink>
                                </h:panelGrid>
                            </h:panelGrid>
                        </h:form>
                    </div>
                </h:panelGroup> 
            </ui:define>

            <ui:define name="right">
                <h:panelGroup rendered="#{stepBean.showNoNotes}">
                    <img src="./resources/images/munchkin.jpg" height="290px" width="170px"/>
                </h:panelGroup>
                <h:panelGroup id="rightNotes" rendered="#{stepBean.showNotes}">
                    <h:outputText escape="false" value = "#{stepBean.notes}" />
                </h:panelGroup>
            </ui:define>



            <ui:define name="content">

                <div id="instruction">
                    <h:outputText value="#{stepBean.instruction}" escape="false"/>

                    <h:form>
                        <h:outputText id="navText" value="#{stepBean.navText}" 
                                      rendered="#{stepBean.showNavText}" escape="false"/>

                        <h:panelGroup id="nextBtnGrp" rendered="#{stepBean.isNextBtn}">
                            <h:commandButton styleClass="genbtn" value="#{stepBean.nextBtnText}"
                                             action="#{stepBean.doNextBtn}"/>
                        </h:panelGroup>

                        <div id="yesNoPanel">
                            <h:panelGroup rendered="#{stepBean.isYesNoBtns}">
                                <div id="yesNoBtns">
                                    <h:panelGrid columns="2">
                                        <h:commandButton value="#{stepBean.firstBtnText}" styleClass="genbtn"
                                                         action="#{stepBean.doFirstBtn}"/>
                                        <h:commandButton value="#{stepBean.secondBtnText}" styleClass="genbtn"
                                                         action="#{stepBean.doSecondBtn}"/>
                                    </h:panelGrid>
                                </div>
                            </h:panelGroup>
                        </div>

                        <h:panelGroup id="manyButtons" rendered="#{stepBean.isManyButtons}">
                            <h:selectOneRadio value="#{stepBean.btnChoice}">
                                <f:selectItems value="#{stepBean.stepBtns}" var="b" 
                                               itemValue="#{b.btnid}"
                                               itemLabel="#{b.btnText}"/>
                            </h:selectOneRadio>
                            <h:commandButton value="Submit" action="#{stepBean.doManyBtns}" 
                                             styleClass="genbtn"/>
                        </h:panelGroup>
                    </h:form>
                </div>

            </ui:define>

            <ui:define name="bottom">
                <h:form>
                    <h:panelGrid columns="5">
                        <h:commandLink styleClass="genlink" action="#" onmouseover="stm(Text[0],Style[12])" onmouseout="htm()" value="Actions"/> 
                        <h:commandLink styleClass="genlink" action="glossary">Glossary</h:commandLink>
                        <h:commandButton styleClass="genbtn" value="End Turn" action="#{stepBean.doEndTurn}"/>
                        <h:commandButton styleClass="genbtn" onmouseover="stm(Text[1],Style[12])" onmouseout="htm()" value="Die" action="#{stepBean.doDie}"/>
                        <h:commandButton styleClass="genbtn" value="Lower Health" action="#{stepBean.doLowerHealth}"/>
                    </h:panelGrid>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
